<template>
	<el-dropdown trigger="click">
		<div class="avatar">
			<img src="@/assets/images/avatar.gif" alt="avatar" />
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>
					<el-icon><User /></el-icon>个人信息
				</el-dropdown-item>
				<el-dropdown-item>
					<el-icon><Edit /></el-icon>修改密码
				</el-dropdown-item>
				<el-dropdown-item @click="logout" divided>
					<el-icon><SwitchButton /></el-icon>退出登录
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>
<script lang="ts" setup name="avatar">
import { useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
import { LOGIN_URL } from "@/config/config";
import { ElMessageBox, ElMessage } from "element-plus";
import { logoutApi } from "@/api/modules/login";

const router = useRouter();
const globalStore = GlobalStore();

// 退出登录
const logout = () => {
	ElMessageBox.confirm("您是否确认退出登录？", "温馨提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning"
	}).then(async () => {
		// await logoutApi();

		router.replace(LOGIN_URL);
		globalStore.setToken("");
		ElMessage({
			type: "success",
			message: "退出登录成功！"
		});
	});
};
</script>
<style lang="scss" scoped>
.avatar {
	width: 40px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 50%;
	img {
		width: 100%;
		height: 100%;
	}
}
</style>
